import React, {Component} from 'react';
import GridTable from '../../components/display/gridTable';
import { Button, Select, Tooltip, Row, Col, Divider, message } from 'antd';
import ScModal from '../../components/feedback/scModal';
import {fetchMap, getOrderDetail, getStubGroupDetail} from '../../fetch/fetchApi';
const Option = Select.Option;

class Pslist extends Component {
  constructor (props) {
    super(props);
    this.props = props;
    this.state = {
      gridData: null,
      loading: !1,
    };
    this.init();
    window.LayoutTab && setTimeout(() => {
      this.queryChargeInfo();
    }, 1);  }

  init () {
    this.query = {};
    this.stubGroupType = {
      '0': '公共',
      '1': '个人',
      '2': '专用开放',
      '3': '专用内部'
    };
    window.LayoutTab && (this.query['stubGroupIds'] = window.LayoutTab.tabParam.stubGroupIds);
    this.params = {};
    // 设置表头
    this.tableColumns = [
      {
        title: '电站名称',
        dataIndex: 'name',
        key: 'name',
        fixed: 'left',
        width: 100,
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text} >
            {text}
          </Tooltip>)
      }, {
        title: '直流数',
        dataIndex: 'dcStubCnt',
        key: 'dcStubCnt',
      }, {
        title: '交流数',
        dataIndex: 'acStubCnt',
        key: 'acStubCnt',
      }, {
        title: '计费标准',
        dataIndex: 'totalFeeInfo',
        key: 'totalFeeInfo',
        className: 'column-nowrap',
        render: (text, record) => (
          <Tooltip placement="topLeft" title={text && text.replace(/#/g, '\n')} >
            {text}
          </Tooltip>)
      }, {
        title: '电站城市',
        dataIndex: 'cityStr',
        key: 'cityStr',
      }, {
        title: '运营类型',
        dataIndex: 'type',
        key: 'type',
      }, {
        title: '电站类型',
        dataIndex: 'stubGroupType',
        key: 'stubGroupType'
      }, {
        title: '操作',
        key: 'action',
        fixed: 'right',
        width: 100,
        render: (text, record) => (
          <div className="action-wrap">
            <a href="javascript:void(0);" onClick={() => this.showEsDetail(record.key, '电站详情')}>电站详情</a>
          </div>
        )
      }
    ];
  }

  // fetch DataSource
  async fetchMap () {
    this.setState({
      loading: !0,
      btnloading: !0
    });
    try {
      const resData = await fetchMap(this.query);
      let resObj = resData.data.data;
      if (resData.data.code === '200') {
        for (let r of resObj) {
          r['stubGroupType'] = this.stubGroupType[r['stubGroupType']];
          r['type'] = r['type'] === 0 ? '非自营桩群': '自营桩群';
        }
        return resObj;
      }
    } catch (e) {
      console.log(e);
    }
  }

  // 提交查询
  queryChargeInfo () {
    this.fetchMap().then((data) => {
      this.setState({
        loading: !1,
        btnloading: !1,
        gridData: data
      });
    });
  }

  // 显示电站详情
  showEsDetail (id, title) {
    this.setState({
      width: 920,
      modalVisible: !0,
      modalTitle: title
    });
    this.getEsDetail(id);
  }

  // 获取电站详情
  async getEsDetail (id) {
    try {
      const resData = await getStubGroupDetail({
        stubGroupId: id
      });
      if (resData.data.code === '200') {
        const result = resData.data.data;
        this.setState({
          modalContent: (<div className="sc-modal-scroll">
            <div className="modal-list">
              <div className={"modal-flex"}>
                <div className={"modal-flex-1"}>
                  <ul>
                    <li>
                      <strong>电站名称:</strong>
                      <span>{result.name}</span>
                    </li>
                    <li>
                      <strong>所在城市</strong>
                      <span>{result.cityStr}</span>
                    </li>
                    <li>
                      <strong>电站地址</strong>
                      <Tooltip placement="topLeft" title={result.address}>
                        <span>{result.address}</span>
                      </Tooltip>
                    </li>
                    <li>
                      <strong>运营类型</strong>
                      <span>{result.type === 1 ? '自营': '非自营'}</span>
                    </li>
                    <li>
                      <strong>电站类型</strong>
                      <span>{this.stubGroupType[result.stubGroupType]}</span>
                    </li>
                    <li>
                      <strong>服务时间</strong>
                      <span>{result.serviceTime}</span>
                    </li>
                    <li>
                      <strong>是否带枪</strong>
                      <span>{result.hasGun === 1 ? '是' : '否'}</span>
                    </li>
                    <li>
                        <strong>车位引导</strong>
                        <Tooltip placement="topLeft" title={result.stubGroupInfo}>
                        <span>{result.stubGroupInfo}</span>
                        </Tooltip>
                    </li>
                    <li>
                      <strong>车位描述</strong>
                      <Tooltip placement="topLeft" title={result.parkingInfo}>
                      <span>{result.parkingInfo}</span>
                      </Tooltip>
                    </li>
                    <li>
                      <strong>停车费</strong>
                      <Tooltip placement="topLeft" title={result.parkingFeeInfo}>
                      <span>{result.parkingFeeInfo}</span>
                      </Tooltip>
                    </li>
                    <li>
                      <strong>电站公告</strong>
                      <span>{result.noticInfo}</span>
                    </li>
                    <li>
                      <strong>漫游状态</strong>
                      <span>{result.enableRoaming === 1 ? '漫游' : '非漫游'}</span>
                    </li>
                    <li>
                      <strong>电站状态</strong>
                      <span>{result.isBuilded === 1 ? '上线': '下线'}</span>
                    </li>
                    <li>
                      <strong>所属商户</strong>
                      <span>{result.equipmentOwnerName}</span>
                    </li>
                    <li>
                      <strong>上线时间</strong>
                      <span>{result.startTime}</span>
                    </li>
                  </ul>
                </div>
                <div className={"modal-flex-1"}>
                  <ul>
                    <li>
                      <strong>充电价格</strong>
                      <Tooltip placement="topLeft" title={result.totalFeeInfo.replace('#', '\n')}>
                        <span>{result.totalFeeInfo.replace('#', '\n')}</span>
                      </Tooltip>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </div>)
        });
      }
    } catch (e) {
      console.log(e);
    }
  }

  // 取消弹窗
  cancel () {
    this.setState({
      modalVisible: !1,
      confirmLoading: !1
    });
  }

  render () {
    const Content = <div className="sc-page-content">
      <div className="page-panel">
        <GridTable postyle="table-center" data={this.state.gridData} columns={this.tableColumns} loading={this.state.loading} pagination={this.state.pagination}/>
        <ScModal
          width={this.state.width}
          modalVisible={this.state.modalVisible}
          modalTitle={this.state.modalTitle}
          modalContent={this.state.modalContent}
          footer={null}
          cancel={this.cancel.bind(this)}
        />
      </div>
    </div>;

    return Content;
  }
}

export default Pslist;